<template>
  <div style="width:100vw">
    <el-row>
      <el-col :span="12">
        <div class="contact_info">
          <div class="map_title">
            <div class="left_view">
              <div>
                <div class="header_title">联系方式</div>
                <div>莱阳润丰食品有限公司</div>
                <div>地址：山东省莱阳市万第镇赤山村</div>
                <div>电话：0535-7750678</div>
                <div>手机：18865667798</div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div id="baidumap"></div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { onMounted } from "@vue/runtime-core";
export default {
  components: {},
  setup() {
    onMounted(() => {
      // 创建地图
      const map = new BMapGL.Map("baidumap"); // 创建地图实例
      const point = new BMapGL.Point(120.938601, 36.942746); // 创建点坐标
      map.centerAndZoom(point, 15);
      map.enableScrollWheelZoom(true);

      const marker = new BMapGL.Marker(new BMapGL.Point(120.938601, 36.942746)); // 创建点
      map.addOverlay(marker);
      const opts = {
        position: point, // 指定文本标注所在的地理位置
        offset: new BMapGL.Size(-30, 0), //设置文本偏移量
      };
      var label = new BMapGL.Label("莱阳润丰食品", opts); // 创建文本标注对象
      label.setStyle({
        color: "#879720",
        fontSize: "12px",
        height: "20px",
        lineHeight: "20px",
        fontFamily: "微软雅黑",
        border: "none",
      });
      map.addOverlay(label);
    });
  },
};
</script>

<style lang="less" scoped>
#baidumap {
  height: 18rem;
  width: 100%;
  overflow: hidden;
  flex: 2;
  margin: 2rem;
}

.contact_info {
  padding: 3rem;

  .header_title {
    color: #333;
    font-size: 1.6rem;
  }

  .map_title {
    display: flex;
    justify-content: space-around;
    height: 20rem;

    .left_view {
      font-size: 1.5rem;
      color: #666;
    }
  }
}
</style>
>
